<!-- layout START -->
<nz-layout>
    <nz-header class="head-wrap">
        <div class="logo">
          <img src="/assets/images/i4.png" alt="">
            <span>爱思商城</span>
        </div>

        <div class="head-operation">
            <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
                <li
                    *ngFor="let menu of headMenus"
                    nz-menu-item
                    [nzSelected]="activeMenu == menu.id"
                    (click)="changeHeadMenu(menu)">
                    <span class="menu-li-text">
                        {{ menu.name }}
                    </span>
                    <span *ngIf="isTestEnv && activeMenu == menu.id" class="menu-li-bg"></span>
                </li>
            </ul>

            <dl class="opera-dl">
                <dd nzTooltipTitle="操作日志" nzTooltipPlacement="bottom" nz-tooltip>
                    <i nz-icon nzType="file-protect" nzTheme="outline"></i>
                </dd>
                <dd nzTooltipTitle="消息中心" nzTooltipPlacement="bottom" nz-tooltip>
                    <i nz-icon nzType="message" nzTheme="outline"></i>
                </dd>
                <dd class="user-dd" nz-popover nzPopoverTitle="" nzPopoverTrigger="click" [nzPopoverContent]="contentTemplate">
                    <nz-avatar nzSize="small" nzIcon="user" [nzSrc]="userInfo?.img"></nz-avatar>
                    <span class="user-name p-l-8">{{ userInfo?.realName }}</span>
                </dd>
            </dl>
            <ng-template #contentTemplate>
                <dl class="dropdowm-wrap">
                    <dd (click)="showAccountModal(userInfo?.id)">
                        <i nz-icon nzType="user" nzTheme="outline"></i>账号信息
                    </dd>
                    <dd (click)="showRoleModal()">
                        <i nz-icon nzType="edit" nzTheme="outline"></i>修改密码
                    </dd>
                    <dt (click)="exit()">
                        <i nz-icon nzType="logout" nzTheme="outline"></i>退 出
                    </dt>
                </dl>
            </ng-template>
        </div>
    </nz-header>

    <nz-layout>
        <nz-sider nzWidth="200px">
            <ul nz-menu nzMode="inline" nzTheme="dark">
                <li
                    nz-submenu
                    *ngFor="let item of navData; let i = index"
                    [nzTitle]="item.name"
                    [nzOpen]="item.open"
                    [nzIcon]="item.icon"
                    (nzOpenChange)="openMenu(item)">
                    <ul>
                        <li
                            nz-menu-item
                            *ngFor="let items of item.children; let i = index"
                            [nzSelected]="items.selected"
                            (click)="toRouter(items.path)">
                            {{ items.name }}
                        </li>
                    </ul>
                </li>
            </ul>
        </nz-sider>
        <nz-layout class="inner-layout">
            <nz-header class="content-head">
                <div class="content-head-bread">
                    <span
                        *ngIf="breadcrumbs.backPath"
                        class="back-icon"
                        (click)="breadcrumbsPaht(breadcrumbs.backPath)">
                        <i nz-icon nzType="arrow-left" nzTheme="outline"></i>
                    </span>
                    <b>{{ breadcrumbs.breadcrumb }}</b>
                </div>
            </nz-header>

            <!-- Content START -->
            <nz-content id="content-scoll" class="content-wrap">
                <!-- <div class="orna-circle" style="left: 40%;"></div> -->
                <router-outlet></router-outlet>
            </nz-content>
            <!-- Content END -->
        </nz-layout>
    </nz-layout>
</nz-layout>
<!-- layout END -->


<nz-modal [(nzVisible)]="passwordModal" nzTitle="修改密码" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label nz-col nzFlex="100px" nzRequired>
                原密码
            </nz-form-label>
            <nz-form-control nz-col nzFlex="200px">
                <input nz-input placeholder="请输入原密码" [(ngModel)]="entityParam.oldPwd" />
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label nz-col nzFlex="100px" nzRequired>
                新密码
            </nz-form-label>
            <nz-form-control nz-col nzFlex="200px">
                <input nz-input placeholder="请输入新密码" [(ngModel)]="entityParam.passWord" />
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label nz-col nzFlex="100px" nzRequired>
                确认密码
            </nz-form-label>
            <nz-form-control nz-col nzFlex="200px">
                <input nz-input placeholder="请输入确认密码" [(ngModel)]="entityParam.affirmPassWord" />
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control [nzSpan]="8" [nzOffset]="5">
                <button nz-button nzType="primary" style="margin-right: 10px;" (click)="revisePwd()">保存</button>
                <button nz-button nzType="default" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </ng-container>
</nz-modal>

<!-- 账号信息 -->
<nz-modal [(nzVisible)]="accountModal" nzTitle="我的资料" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label nz-col nzFlex="100px" nzRequired>姓名</nz-form-label>
            <nz-form-control nz-col nzFlex="200px">
                <input nz-input type="text" [maxLength]="32" name="realName" [(ngModel)]="accountParam.realName"
                    placeholder="请输入姓名" autocomplete="off">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label nz-col nzFlex="100px">联系方式</nz-form-label>
            <nz-form-control nz-col nzFlex="200px">
                <input nz-input type="text" [maxlength]="11" name="phoneNumber" [(ngModel)]="accountParam.phoneNumber" placeholder="请输入联系方式"
                    autocomplete="off">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label nz-col nzFlex="100px">昵称</nz-form-label>
            <nz-form-control nz-col nzFlex="200px">
                <input nz-input type="text" name="nickName" [(ngModel)]="accountParam.name" placeholder="请输入昵称"
                    autocomplete="off">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label nz-col nzFlex="100px">头像</nz-form-label>
            <nz-form-control nz-col nzFlex="200px">
                <label for="resFile" class="upFile" *ngIf="!accountParam.img">
                    <i nz-icon nzType="plus"></i>
                    <span>上传图片</span>
                    <input id="resFile" type="file" name="img" [(ngModel)]="fileVal" multiple="multiple" accept="image/*"
                        (change)="handleFileInput($event)">
                </label>
                <div class="videoImg" *ngIf="accountParam.img">
                    <img nz-image nzSrc="{{accountParam?.img}}" [nzFallback]="fallback" />
                    <a (click)="deleteImg()">删除</a>
                </div>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control [nzSpan]="8" [nzOffset]="5">
                <button nz-button nzType="primary" (click)="accountSave()">确定</button>
                &nbsp;
                <button nz-button nzType="default" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </ng-container>
</nz-modal>

<!-- <a class="refreshCache" (click)="refreshCache()">
  <i nz-icon nzType="sync" [nzSpin]="CacheLoadingOne" nzTheme="outline"></i>
  <span class="text">刷新缓存</span>
</a> -->
